<template>
  <inline-modal :title="$ct('detail','详情')" :visible="visible"
                @cancel="() => { $emit('cancel') }" :showOk="false">
    <div class="main">
      <a-spin :spinning="loading">
        <a-form :form="form">
          <a-row>
            <a-col span="12">
              <a-form-item label="请求工号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['userNameId']" readOnly/>
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item label="请求姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['userName']" readOnly
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item label="请求IP" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['operationIp']" readOnly
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item label="请求描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['operationDesc']" readOnly
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item label="请求设备" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['requestDevice']" readOnly
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item label="请求URL" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['operationUrl']" readOnly
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item label="请求方法名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['operationMethodName']" readOnly
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item label="请求方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['operationMethod']" readOnly
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item label="请求参数" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['operationArgs']" readOnly
                />
              </a-form-item>
            </a-col>
            <a-col span="12">
              <a-form-item label="请求耗时" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['operationTime']" readOnly
                />
              </a-form-item>
            </a-col>
            <a-col span="24">
              <a-form-item label="响应参数" :labelCol="{
                 xs: {
                  span: 24,
                },
                sm: {
                  span: 2,
                },
                }" :wrapperCol="{
                xs: {
                  span: 24,
                },
                sm: {
                  span: 22,
                },
              }">
                <a-textarea :style="{color: type == 'errorLog'? 'red' : 'unset'}" readOnly v-decorator="['operationResponeArgs']" :auto-size="true"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </div>
  </inline-modal>
</template>

<script>
  import pick from "lodash.pick";
  import ARow from "ant-design-vue/es/grid/Row";

  const fields = ['userNameId', 'userName', 'operationIp', 'operationDesc', 'requestDevice', 'operationUrl', 'operationMethodName', 'operationMethod', 'operationArgs', 'operationTime', 'operationResponeArgs']
  // 表单字段
  export default {
    props: {
      visible: {
        type: Boolean,
        required: true
      },
      model: {
        type: Object,
        default: () => null
      },
      type:''
    },
    components: {
      ARow
      // TDictSelectTag, TMultiSelectTag
    },
    data() {
      return {
        title: "",
        loading: false,
        labelCol: {
          xs: {
            span: 24,
          },
          sm: {
            span: 4,
          },
        },
        wrapperCol: {
          xs: {
            span: 24,
          },
          sm: {
            span: 20,
          },
        },
        form: this.$form.createForm(this),
      }
    },
    created() {
      // 防止表单未注册
      fields.forEach((v) => this.form.getFieldDecorator(v));
      // 当 model 发生改变时，为表单设置值
      this.$watch('model', () => {
        this.$nextTick(() => {
          this.model && this.form.setFieldsValue(pick(this.model, fields));
        })
      });
    },
    methods: {
      add(m, data) {
        console.log(m, data)
      },
      edit(m, data) {
        console.log(m, data)
      }
    },
  }
</script>
<style lang="less" scoped>
  /deep/ .ant-descriptions-bordered .ant-descriptions-item-label {
    white-space: nowrap;
  }

  .ant-descriptions {
    user-select: text;
  }
</style>

